<script setup lang="ts">
import type { SysDict, SysDictQuery } from '@/apis/system/sysDictApi'
import type { DataAction } from '@/components/DataForm/types'
import { FullScreen, Refresh } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import { CommonStates } from '@/apis/common/commonApi'
import { sysDictApi, SysDictValueTypes } from '@/apis/system/sysDictApi'
import { useEditFormDrawer } from '@/components/DataForm/useEditFormDrawer'
import { useTable } from '@/components/DataPage/useTable'
import BaseCard from '@/layouts/BaseCard.vue'
import SysDictCustomFields from './SysDictCustomFields.vue'
import SysDictValueTree from './SysDictValueTree.vue'

const {
  editFormData,
  openEditForm,
  EditFormDrawer,
} = useEditFormDrawer<SysDict>({
  editFields: [
    { name: 'dictName', title: '字典名称', require: true, maxLength: 64 },
    { name: 'dictCode', title: '字典编码', require: true, maxLength: 64 },
    { name: 'maxLevel', title: '字典层级', require: true },
    { name: 'state', title: '字典状态', require: true, options: [...CommonStates], editType: 'button' },
    { name: 'valueType', title: '值类型', require: true, options: [...SysDictValueTypes], editType: 'button' },
    { name: 'customFields', title: '自定义字段', require: true, show: data => data.valueType === 'CUSTOM' },
  ],
})

const {
  submitQuery,
  QueryForm,
  Table,
  TableFieldFilterButton,
} = useTable<SysDictQuery, SysDict>({
  autoQuery: true,
  queryPage: sysDictApi.queryPage,
  queryFields: [
    { title: 'ID', name: 'id' },
    { title: '名称', name: 'dictName' },
    { title: '编码', name: 'dictCode' },
    { title: '值类型', name: 'valueType', options: [...SysDictValueTypes] },
    { title: '状态', name: 'state', options: [...CommonStates] },

  ],
  tableFields: [
    { title: 'ID', name: 'id', width: 80, columnType: 'KEY', sort: true },
    { title: '名称', name: 'dictName', width: 180, columnType: 'MAIN', sort: true, click: onDictValue },
    { title: '编码', name: 'dictCode', width: 100, sort: true },
    { title: '值类型', name: 'valueType', width: 90, options: [...SysDictValueTypes] },
    { title: '状态', name: 'state', width: 90, options: [...CommonStates] },
    { title: '层级', name: 'maxLevel', width: 100, sort: false, align: 'center' },
    { title: '更新时间', name: 'updateTime', width: 180, columnFilter: false },
  ],
})

const actions = reactive<Record<string, DataAction>>({
  create: {
    label: '新增',
    type: 'primary',
    authCode: 'system:settings:dict:create',
    click: () => openEditForm('新增', {
      state: 'ENABLE',
      maxLevel: 2,
      valueType: 'NONE',
      parentId: 0,
      priority: 0,
    }, sysDictApi.create),
  },
  dictValue: {
    label: '字典值',
    type: 'primary',
    click: onDictValue,
  },
  modify: {
    label: '编辑',
    type: 'primary',
    authCode: 'system:settings:dict:modify',
    click: onEdit,
  },
  changeState: {
    label: row => row.state === 'ENABLE' ? '禁用' : '启用',
    type: 'warning',
    authCode: 'system:settings:dict:modify',
    confirm: row => `是否${row.state === 'ENABLE' ? '禁用' : '启用'}应用角色`,
    click: data => sysDictApi.modify({ id: data.id, state: data.state === 'ENABLE' ? 'DISABLE' : 'ENABLE' }),
    success: () => submitQuery(),
    message: true,
  },
  remove: {
    label: '删除',
    type: 'danger',
    authCode: 'system:settings:dict:remove',
    confirm: '删除不可恢复，请谨慎确认',
    click: data => sysDictApi.remove(data.id),
    success: () => submitQuery(),
    message: true,
  },
})

async function onEdit(row: SysDict) {
  openEditForm('编辑', await sysDictApi.findDetail(row.id!), sysDictApi.modify)
}

const detailData = ref<SysDict>()
const valueTreeVisible = ref(false)
async function onDictValue(row: SysDict) {
  detailData.value = await sysDictApi.findDetail(row.id!)
  valueTreeVisible.value = true
}
</script>

<template>
  <BaseCard title="查询条件">
    <QueryForm />
  </BaseCard>
  <BaseCard title="数据列表" class="mt-2">
    <template #buttons>
      <!-- 表格按钮 -->
      <data-button :action="actions.create" />
      <el-button :icon="Refresh" circle @click="submitQuery()" />
      <el-button :icon="FullScreen" circle />
      <TableFieldFilterButton />
    </template>
    <!-- 数据表格 -->
    <Table :row-actions="[actions.dictValue, actions.changeState, actions.modify, actions.remove]" />
  </BaseCard>

  <!-- 数据编辑 -->
  <EditFormDrawer size="small" width="900" @success="(title:string) => submitQuery(title === '新增' ? 1 : undefined)">
    <template #customFields>
      <SysDictCustomFields v-model="editFormData" />
    </template>
  </EditFormDrawer>

  <el-drawer
    v-if="detailData"
    v-model="valueTreeVisible"
    title="字典值"
    size="1000"
    destroy-on-close
    center
    resizable
  >
    <SysDictValueTree :root="detailData" />
  </el-drawer>
</template>
